<template>
	<div></div>
</template>

<script>
// import * as echarts from '@/utils/echarts.min.js';
import PageLayout from '@/layouts/PageLayout'
import HeadInfo from '@/components/tool/HeadInfo'
import {
	mapState
} from 'vuex'
import {
	request,
	METHOD
} from '@/utils/request'

export default {
	name: 'WorkPlace',
	components: {
		HeadInfo,
		PageLayout
	},
	i18n: require('./i18n'),
	data() {
		return {
			projects: [{
				img: require('@/assets/img/logo2.png'),
				title: '前端铺子-移动端uniapp',
				type: 'App/小程序',
				content: '项目基于VUE，使用colorUi与uview框架，完美支持微信小程序，功能：自定义TabBar/顶部、地图轨迹回放、电子签名、自定义相机、拍照图片水印、在线答题、证件识别、周边定位查询、文档预览、各种图表、行政区域、海报生成器、视频播放、主题切换、时间轴、瀑布流、排行榜、渐变动画、加载动画、请求封装等',
				other: '<a href="https://gitee.com/kevin_chou/qdpz" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=qdpz" /></a>'
			},
			{
				img: require('@/assets/img/logo2.png'),
				title: '前端铺子-说明文档',
				type: 'H5/PC端',
				content: '「前端铺子·文档」 使用vue3.0 + TS，采用 Vitepress 开发，支持主题切换，代码简洁。如发现文档有误，欢迎提 pr 帮助改进',
				other: '<a href="https://gitee.com/kevin_chou/qdpz-docs" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=qdpz-docs" /></a>'
			},
			{
				img: require('@/assets/img/logo/dataV.png'),
				title: '数据可视化大屏集合',
				type: 'PC端',
				content: '可视化数据电子大屏集合，包含行业：金融行业、智慧社区、智慧物业、智慧政务、智慧交通、通用模板等，包含功能：自定义字体、Css动画、K线、折线等、WebSocket实时数据、各种图表，iframe嵌套H5/App，替换js数据即可，满足您会议展览、业务监控、风险预警、地理信息、数据分析/展示等多种业务的展示需求',
				other: '<a href="https://gitee.com/kevin_chou/dataVIS" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=dataVIS" /></a>'
			},
			{
				img: require('@/assets/img/logo/yk_logo.jpeg'),
				title: '易凯商城 - H5端',
				type: 'H5端',
				content: '纯前端H5版本商城，页面清晰易上手、部署简单、H5灵活可广泛应用（可App嵌套/微信公众号/H5端），包含：商品展示、商品分类、分销（暂时移除）购物车、地址管理、售后管理、投诉建议、个人中心等页面',
				other: '<a href="https://gitee.com/kevin_chou/ykShop" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=ykShop" /></a>'
			},
			{
				img: require('@/assets/img/logo/koalaBillLogo.jpg'),
				title: '考拉记账 - 热门应用',
				type: '多端打包',
				content: '项目基于uniap开发，完美支持小程序，微信小程序使用人数2k+，一款效率类·记账软件，UI设计精美、操作流畅、代码精简清晰，适合学习。开源项目为基础版，仅供学习使用',
				other: '<a href="https://gitee.com/kevin_chou/koala" target="_blank"><img style="width: 110px;position: absolute;right: 0;" src="https://svg.hamm.cn/gitee.svg?type=star&user=kevin_chou&project=koala" /></a>'
			},
			{
				img: require('@/assets/img/logo/pc.png'),
				title: '小鼎财经科技官网',
				type: 'PC端',
				content: '公司立足于外汇交易的大数据研究，结合自动交易软件的实现，来规避人工操作的失误和时间精力成本，基于数据分析的结果，分析团队制定量化模型，开发智能交易系统',
				other: '<a href="https://zhoukaiwen.com/proj/pcWebsite/dingang/index.html" target="_blank">体验预览</a>'
			},
			{
				img: require('@/assets/img/logo/pc.png'),
				title: '医疗器械官网(印度)',
				type: 'PC/H5端',
				content: '商业类型项目，所属行业为医疗器械，客户群体为印度企业/居民，官网展示医疗器械、商品购买、公司简介、商品简介、注册登陆等',
				other: '<a href="https://zhoukaiwen.com/proj/outs_medical/index.html" target="_blank">体验预览</a>'
			},
			{
				img: require('@/assets/img/logo/pc.png'),
				title: '「51泊车」产品网站',
				type: 'PC端',
				content: '入职锦途停车时，为公司制作的官方网站，"51泊车"该网站立足于服务乘用车车主、停车场业主、搜索汽车服务市场。让车主"出行不闹心，停车不担心"',
				other: '<a href="https://zhoukaiwen.com/proj/pcWebsite/51car/index.html" target="_blank">体验预览</a>'
			},
			{
				img: require('@/assets/img/logo/pc.png'),
				title: '锦途停车服务官网',
				type: 'PC端',
				content: '锦途停车是一家专业的“互联网+城市服务”的倡导者，是智慧城市的领跑者，为人们提供便捷智能的生活服务是我们的愿景，致力于“创造更多幸福感，让生活更多欢笑”',
				other: '<a href="https://zhoukaiwen.com/proj/pcWebsite/jintu2/index.html" target="_blank">体验预览</a>'
			},
			{
				img: require('@/assets/img/logo/pc.png'),
				title: '微信答题H5页',
				type: 'H5端',
				content: '入职锦途停车时，为人事部门制作的一款发布招聘信息前，对技术人员的在线答题筛选的H5页面，初步筛选入职的技术人员。',
				other: '<a href="https://zhoukaiwen.com/proj/H5_answer/index.html" target="_blank">体验预览</a>'
			}
			],
			loading: true,
			skill: [
				{
					avatar: require('@/assets/img/skill/html.jpeg'),
					name: 'HTML'
				},
				{
					avatar: require('@/assets/img/skill/JavaScript.jpeg'),
					name: 'JavaScript'
				},
				{
					avatar: require('@/assets/img/skill/vue.jpeg'),
					name: 'Vue'
				},
				{
					avatar: require('@/assets/img/skill/react.png'),
					name: 'React'
				},
				{
					avatar: require('@/assets/img/skill/node.jpeg'),
					name: 'Node.js'
				},
				{
					avatar: require('@/assets/img/skill/jquery.jpeg'),
					name: 'jQuery'
				},
				{
					avatar: require('@/assets/img/skill/bootstrap.png'),
					name: 'Bootstrap'
				},
				{
					avatar: require('@/assets/img/skill/xiaochengxu.jpeg'),
					name: '小程序'
				},
				{
					avatar: require('@/assets/img/skill/uniapp.png'),
					name: 'UniApp'
				}
			],
		}
	},
	computed: {
		...mapState('account', {
			currUser: 'user'
		}),
		...mapState('setting', ['lang'])
	},
	created() {
		this.loading = false
	},
	mounted(){
		this.init()
	},
	methods: {
		init(){}
	}
}
</script>

<style lang="less">
@import "index";
@media screen and (max-width: 1012px) {
	.ant-card-grid {
		width: 100% !important;
	}
}
</style>
